<template>
  <el-dialog :close-on-click-modal="false" :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close" append-to-body>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="地点名称" prop="name"><el-input v-model="form.name" type="text" placeholder="请输入" maxlength="20" show-word-limit></el-input></el-form-item>
      <el-form-item label="分类" prop="category">
        <el-select v-model="form.category" placeholder="请选择" @change="onChangeType">
          <el-option label="道路" :value="`ROAD`"></el-option>
          <el-option label="河道" :value="`RIVER`"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="面积（㎡）" prop="area"><el-input v-model="form.area" type="text" placeholder="请输入" ></el-input></el-form-item>
      <el-form-item label="权重" prop="weight"><el-input v-model="form.weight" type="text" placeholder="请输入" ></el-input></el-form-item>
      <el-form-item label="地点类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择" @change="onChangeType">
          <el-option label="考勤点" :value="1"></el-option>
          <el-option label="考勤面" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考勤半径" prop="radius">
        <!-- <el-select v-model="form.radius" placeholder="请选择">
          <el-option label="10米" :value="10"></el-option>
          <el-option label="20米" :value="20"></el-option>
          <el-option label="30米" :value="30"></el-option>
          <el-option label="40米" :value="40"></el-option>
          <el-option label="50米" :value="50"></el-option>
          <el-option label="100米" :value="100"></el-option>
          <el-option label="200米" :value="200"></el-option>
          <el-option label="300米" :value="300"></el-option>
          <el-option label="500米" :value="500"></el-option>
          <el-option label="1000米" :value="1000"></el-option>
        </el-select> -->
        <el-input v-model="form.radius" type="text" style="width:220px;" placeholder="请输入" @input="e => (form.radius=form.radius.replace(/^\D/g,''))">
            <template slot="append">米</template>
        </el-input>
      </el-form-item>
      <editMap ref="editMap" v-model="form.locations" :type="form.type" :radius="form.radius" height="500px"></editMap>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import editMap from "./editMap.vue";
import { roadAdd, roadEdit } from "@/api/checkRoad";

export default {
  components: {
    editMap,
  },
  props: {
    /* 显示隐藏 */
    show: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: () => {
        return {};
      },
    },
    notReq: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    item: {
      handler(val) {
        this.form = val || {};
      },
      immediate: true,
    },
    show: {
      handler(val) {
        val && this.resetForm("form");
      },
      immediate: true,
    },
  },
  data() {
    return {
      form: {},
      rules: {
        title: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
        type: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
        size: [
          {
            required: true,
            message: "请输入内容",
            trigger: ["change", "input"],
          },
        ],
      },
    };
  },

  methods: {
    submit() {
      // console.log('打印当前编辑：', this.form);
      if (this.$refs.editMap.isEdit) {
        this.$modal.msgWarning("请先结束编辑");
        return;
      }
      if (!this.form.locations) {
        this.$modal.msgWarning("请先编辑点位");
        return;
      }
      // console.log('打印地图：', this.$refs.editMap.isEdit);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            roadEdit(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit("change", this.form);
              this.close();
            });
          } else {
            roadAdd(this.form).then((res) => {
              // 验证成功-新增或者编辑
              this.$emit("change", this.form);
              this.close();
            });
          }
        }
      });
    },
    close() {
      this.form = {};
      this.$emit("update:show", false);
    },
    onChangeType() {
      this.$set(this.form, "locations", null);
    },
  },
};
</script>
